<!-- 新增/修改考勤组 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="type === '1' ? title + '考勤组' : '编辑豁免人员'"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <!-- <a-tabs lazy-load default-active-key="1">
      <a-tab-pane key="1" title="基础设置"> -->
    <BaseSetting ref="baseSetting" v-if="type === '1'" />
    <!-- </a-tab-pane> -->
    <!-- <a-tab-pane key="2" title="打卡设置"> -->
    <CardSetting ref="cardSetting" v-if="type === '2'" />
    <!-- </a-tab-pane>
    </a-tabs> -->
    <footer>
      <a-button
        class="btn"
        style="
          margin-right: 20px;
          border: 1px rgba(242, 242, 242, 1) solid;
          background-color: #fff;
        "
        @click="$router.go(-1)"
        >返回</a-button
      >
      <a-button class="btn" type="primary" @click="save">保存</a-button>
    </footer>
  </ContentCard>
</template>

<script lang="ts" setup>
import BaseSetting from './BaseSetting.vue';
import CardSetting from './CardSetting.vue';

const route = useRoute();
const router = useRouter();
const baseSetting = ref();
const cardSetting = ref();
const id = route.query.id;
const type = ref(route.query.type as unknown as string);

const title = id ? '编辑' : '新增';

const breadCrumb: string[] = [
  '考勤',
  '基础设置',
  '考勤设置',
  id ? '编辑考勤组' : '新增考勤组'
];
const save = () => {
  if (type.value === '1') baseSetting.value.save();
  else if (type.value === '2') cardSetting.value.save();
  router.back();
};
</script>

<style lang="less" scoped>
footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}
</style>
